﻿@{
    ViewBag.Title = "Tabs";
}

<h2>Tab samples</h2>

<h3>Sample #1</h3>

@{
    {
        var tab = Html.CreateBootstrapTab();
        var tab1 = tab.CreateTabPane("Home", TabPaneOptions.Active);
        var tab2 = tab.CreateTabPane("Profile");
        var tab3 = tab.CreateTabPane("Default");

        using (var tabSection = Html.BootstrapTab(tab, htmlAttributes: new { @class = "well" }))
        {
            using (tabSection.TabPane(tab1))
            {
    <span>Anim pariatur cliche... 1</span>
            }
            using (tabSection.TabPane(tab2))
            {
    <span>Anim pariatur cliche... 2</span>
            }
            using (tabSection.TabPane(tab3))
            {
    <span>Anim pariatur cliche... 3</span>
            }
        }
    }

    using (Html.VisiToggler("show cshtml source code", options: VisiOptions.Slow | VisiOptions.SlideToggle | VisiOptions.HiddenByDefault, htmlAttributes: new { @class = "onright" }))
    {
        <br />
    <div class="code">
<span class="Linq">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var</span>&nbsp;tab&nbsp;=&nbsp;Html.CreateBootstrapTab();<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab1&nbsp;=&nbsp;tab.CreateTabPane(<span class="String">"Home"</span>,&nbsp;TabPaneOptions.Active);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab2&nbsp;=&nbsp;tab.CreateTabPane(<span class="String">"Profile"</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab3&nbsp;=&nbsp;tab.CreateTabPane(<span class="String">"Default"</span>);<br />
<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(<span class="Linq">var</span>&nbsp;tabSection&nbsp;=&nbsp;Html.BootstrapTab(tab,&nbsp;htmlAttributes:&nbsp;<span class="Keyword">new</span>&nbsp;{&nbsp;&#64;<span class="ReferenceType">class</span>&nbsp;=&nbsp;<span class="String">"well"</span>&nbsp;}))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(tabSection.TabPane(tab1))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;1&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(tabSection.TabPane(tab2))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;2&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(tabSection.TabPane(tab3))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;3&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
</div>
}
}

<h3>Sample #2</h3>

@{
    {
        var header2 = Html.Container()
                        .Add<Img>("~/Images/icon-leaf.png", htmlAttributes: new { title = "this is title", 
                                                                                    width = 18, 
                                                                                    height = 18 })
                        .Add(" Profile");
        
        var tab = Html.CreateBootstrapTab(htmlAttributes: new { @class = "well" });
        var tab1 = tab.CreateTabPane("Home");
        var tab2 = tab.CreateTabPane(header2, TabPaneOptions.Active);
        var tab3 = tab.CreateTabPane("Default");

        using (var tabSection = Html.BootstrapTab(tab))
        {
    @tab1.FromPartial(TabPartials.PARTIAL1)
    @tab2.FromPartial(TabPartials.PARTIAL2)
            using (tabSection.TabPane(tab3))
            {
    <span>Anim pariatur cliche... 3</span>
            }
        }
    }

    var togglerElement = Html.Container()
                        .Add<Img>("~/Images/icon-leaf.png", htmlAttributes: new
                        {
                            title = "this is toggler title",
                            width = 10,
                            height = 10
                        })
                        .Add(" show cshtml source code");

    var toggler = Html.CreateVisiToggler(togglerElement, options: VisiOptions.HiddenByDefault, htmlAttributes: new { @class = "onright" });

    using(Html.VisiToggler(toggler))
    {
        <br />
    <div class="code" id="smpl2" >
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;header2&nbsp;=&nbsp;Html.Container()<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.Add&lt;Img&gt;(<span class="String">"~/Images/icon-leaf.png"</span>,&nbsp;htmlAttributes:&nbsp;<span class="Keyword">new</span>&nbsp;{&nbsp;title&nbsp;=&nbsp;<span class="String">"this&nbsp;is&nbsp;title"</span>,&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width&nbsp;=&nbsp;18,&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height&nbsp;=&nbsp;18&nbsp;})<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.Add(<span class="String">"&nbsp;Profile"</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab&nbsp;=&nbsp;Html.CreateBootstrapTab(htmlAttributes:&nbsp;<span class="Keyword">new</span>&nbsp;{&nbsp;&#64;<span class="ReferenceType">class</span>&nbsp;=&nbsp;<span class="String">"well"</span>&nbsp;});<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab1&nbsp;=&nbsp;tab.CreateTabPane(<span class="String">"Home"</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab2&nbsp;=&nbsp;tab.CreateTabPane(header2,&nbsp;TabPaneOptions.Active);<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab3&nbsp;=&nbsp;tab.CreateTabPane(<span class="String">"Default"</span>);<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(<span class="Linq">var</span>&nbsp;tabSection&nbsp;=&nbsp;Html.BootstrapTab(tab))<br />
&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&#64;tab1.FromPartial(TabPartials.PARTIAL1)<br />
&#64;tab2.FromPartial(TabPartials.PARTIAL2)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(tabSection.TabPane(tab3))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;3&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

    </div>
}

<a href="#" onclick="@toggler.ToggleJS(5000)">test</a>
}

<h3>Sample #3</h3>

@{
    {
        var tab = Html.CreateBootstrapTab(TabOptions.Fade);
        var tab1 = tab.CreateTabPane("Home", TabPaneOptions.Active);
        var tab2 = tab.CreateTabPane("Profile");
        var tab3 = tab.CreateTabPane("Default", TabPaneOptions.Dropdown | TabPaneOptions.Caret);
        var tab4 = tab.CreateTabPane("@First", parentTabPane: tab3);
        var tab5 = tab.CreateTabPane("@Second", parentTabPane: tab3);

    <div>Control tabs outside the section.</div>
    <div>Activate second tab (java-script)
        <input type="button" onclick="@tab2.ActivateTabJS()" value="activate" />
    </div>
    <div>Activate forth tab (attributes)
        <input type="button" @tab4.ActivateTabAttr() value="activate"/>
    </div>


        using (var tabSection = Html.BootstrapTab(tab, htmlAttributes: new { @class = "well" }))
        {
            using (tabSection.TabPane(tab1))
            {
    <span>Anim pariatur cliche... 1</span>
            }
            using (tabSection.TabPane(tab2))
            {
    <span>Anim pariatur cliche... 2</span>
            }

            using (tabSection.TabPane(tab4))
            {
    <span>Anim pariatur cliche... 4</span>
            }

            using (tabSection.TabPane(tab5))
            {
    <span>Anim pariatur cliche... 5</span>
            }
        }
    }
}

<!-- sample of non-csharp approach -->
<div ><a href="#" onclick="$('#smpl3').toggle(); return false;" class="onright">show cshtml source code</a></div>
<div><br />
    <div class="code hidenOnStart" id="smpl3" >
<span class="Linq">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var</span>&nbsp;tab&nbsp;=&nbsp;Html.CreateBootstrapTab(TabOptions.Fade);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab1&nbsp;=&nbsp;tab.CreateTabPane(<span class="String">"Home"</span>,&nbsp;TabPaneOptions.Active);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab2&nbsp;=&nbsp;tab.CreateTabPane(<span class="String">"Profile"</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab3&nbsp;=&nbsp;tab.CreateTabPane(<span class="String">"Default"</span>,&nbsp;TabPaneOptions.Dropdown&nbsp;|&nbsp;TabPaneOptions.Caret);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab4&nbsp;=&nbsp;tab.CreateTabPane(<span class="String">"&#64;First"</span>,&nbsp;parentTabPane:&nbsp;tab3);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab5&nbsp;=&nbsp;tab.CreateTabPane(<span class="String">"&#64;Second"</span>,&nbsp;parentTabPane:&nbsp;tab3);<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;Control&nbsp;tabs&nbsp;outside&nbsp;the&nbsp;section.&lt;/div&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;Activate&nbsp;second&nbsp;tab&nbsp;(java-script)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=<span class="String">"button"</span>&nbsp;onclick=<span class="String">"&#64;tab2.ActivateTabJS()"</span>&nbsp;value=<span class="String">"activate"</span>&nbsp;/&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;Activate&nbsp;forth&nbsp;tab&nbsp;(attributes)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=<span class="String">"button"</span>&nbsp;&#64;tab4.ActivateTabAttr()&nbsp;value=<span class="String">"activate"</span>/&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(<span class="Linq">var</span>&nbsp;tabSection&nbsp;=&nbsp;Html.BootstrapTab(tab,&nbsp;htmlAttributes:&nbsp;<span class="Keyword">new</span>&nbsp;{&nbsp;&#64;<span class="ReferenceType">class</span>&nbsp;=&nbsp;<span class="String">"well"</span>&nbsp;}))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(tabSection.TabPane(tab1))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;1&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(tabSection.TabPane(tab2))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;2&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(tabSection.TabPane(tab4))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;4&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(tabSection.TabPane(tab5))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;5&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
</div>
</div>
